<template>
  <view class="container">
    <!-- 新增商品按钮 -->
    <view class="add-btn" @click="navigateToAdd">
      <button class="btn">+ 新增商品</button>
    </view>
    
    <!-- 商品列表 -->
    <view class="product-list">
      <!-- 列表标题 -->
      <view class="list-header">
        <view class="header-item" style="width: 40%;">商品信息</view>
        <view class="header-item" style="width: 20%;">价格</view>
        <view class="header-item" style="width: 20%;">状态</view>
        <view class="header-item" style="width: 20%;">操作</view>
      </view>
      
      <!-- 商品项 -->
      <view class="product-item" v-for="(product, index) in products" :key="product.id">
        <view class="item-info" style="width: 40%;" @click="navigateToEdit(product)">
          <image :src="product.imageUrl" class="product-img" mode="widthFix"></image>
          <view class="product-name">{{ product.name }}</view>
        </view>
        <view class="item-info" style="width: 20%;">¥{{ product.price.toFixed(2) }}</view>
        <view class="item-info" style="width: 20%;">
          <view class="status-tag" :class="product.status === 'online' ? 'online' : 'offline'">
            {{ product.status === 'online' ? '已上架' : '已下架' }}
          </view>
        </view>
        <view class="item-info" style="width: 20%;">
          <button 
            class="status-btn" 
            :class="product.status === 'online' ? 'offline-btn' : 'online-btn'"
            @click.stop="toggleStatus(product.id)"
          >
            {{ product.status === 'online' ? '下架' : '上架' }}
          </button>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="products.length === 0">
        <image src="/static/images/empty-product.png" class="empty-img" mode="widthFix"></image>
        <text class="empty-text">暂无商品数据</text>
        <text class="empty-desc">点击"新增商品"添加第一个商品吧</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  },
  onLoad() {
    // 页面加载时获取商品列表
    this.getProducts();
  },
  onShow() {
    // 页面显示时重新获取商品列表，确保数据最新
    this.getProducts();
  },
  methods: {
    // 从本地存储获取商品列表
    getProducts() {
      const products = uni.getStorageSync('products') || [];
      this.products = products;
    },
    
    // 跳转到新增商品页面
    navigateToAdd() {
      uni.navigateTo({
        url: '/pages/ucenter/goodsAdd'
      });
    },
    
    // 跳转到编辑商品页面
    navigateToEdit(product) {
      uni.navigateTo({
        url: `/pages/ucenter/goodsEdit?id=${product.id}`
      });
    },
    
    // 切换商品上架/下架状态
    toggleStatus(id) {
      const index = this.products.findIndex(item => item.id === id);
      if (index !== -1) {
        // 切换状态
        this.products[index].status = this.products[index].status === 'online' ? 'offline' : 'online';
        
        // 保存到本地存储
        uni.setStorageSync('products', this.products);
        
        // 提示用户
        uni.showToast({
          title: this.products[index].status === 'online' ? '上架成功' : '下架成功',
          icon: 'success',
          duration: 2000
        });
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 新增按钮样式 */
.add-btn {
  margin-bottom: 16px;
}

.btn {
  width: 100%;
  background-color: #007aff;
  color: #fff;
  border-radius: 8px;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
}

/* 商品列表样式 */
.product-list {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

/* 列表标题样式 */
.list-header {
  display: flex;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.header-item {
  font-size: 14px;
  color: #666;
  font-weight: bold;
}

/* 商品项样式 */
.product-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.product-item:last-child {
  border-bottom: none;
}

.item-info {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}

/* 商品图片和名称 */
.product-img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 12px;
}

.product-name {
  flex: 1;
  line-height: 1.4;
}

/* 状态标签样式 */
.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-tag.online {
  background-color: #e6f7ee;
  color: #00b42a;
}

.status-tag.offline {
  background-color: #fef0f0;
  color: #f53f3f;
}

/* 状态按钮样式 */
.status-btn {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  height: auto;
  line-height: normal;
}

.online-btn {
  background-color: #007aff;
  color: #fff;
}

.offline-btn {
  background-color: #f53f3f;
  color: #fff;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
}

.empty-img {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

.empty-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.empty-desc {
  font-size: 14px;
  color: #999;
}
</style>
    